<template>
	<view class="view-contain">
		<public-module leftIcon="arrow-left" :title="title" />

		<!-- 成语题库说明 -->
		<view class="question-bank-desc">
			<!-- 修改部分：使用 view 包裹每条说明 -->
			<view>20250312，集成某智公考成语500例</view>
			<view>20250318，集成高频成语700词记忆版</view>
			<view>20250410，成语库目前有932个公考成语</view>
		</view>

		<!-- 成语搜索 -->
		<view class="search-area">
			<input v-model="searchKeyword" placeholder="请输入成语" @input="searchIdiom" />
			<button @click="searchIdiom">搜索</button>
		</view>

		<!-- 搜索结果展示 -->
		<view class="search-result" v-if="searchResult">
			<view class="result-item">
				<text class="result-title">{{ searchResult.idiom }}</text>
				<text class="result-pinyin">{{ searchResult.pinyin }}</text>
				<text class="result-explanation">{{ searchResult.explanation }}</text>
				<text class="result-example">{{ searchResult.example }}</text>
			</view>
		</view>

		<!-- 模式选择 -->
		<view class="mode-selection">
			<view class="mode-cards">
				<view class="mode-card" :class="{'selected': selectedMode === 'study'}" @click="selectMode('study')">
					<view class="mode-icon">
						<u-icon name="bookmark" color="#4A89DC" size="40"></u-icon>
					</view>
					<text class="mode-title">背成语</text>
					<text class="mode-desc">查看成语卡片，学习成语含义和用法</text>
				</view>

				<view class="mode-card" :class="{'selected': selectedMode === 'dictation'}"
					@click="selectMode('dictation')">
					<view class="mode-icon">
						<u-icon name="edit-pen-fill" color="#48CFAD" size="40"></u-icon>
					</view>
					<text class="mode-title">默写成语</text>
					<text class="mode-desc">根据成语释义，填写成语</text>
				</view>
			</view>
		</view>

		<!-- 题目数量选择 -->
		<view class="count-selection">
			<view class="count-buttons">
				<view class="count-button" :class="{'selected': selectedCount === 10}" @click="selectCount(10)">
					<text>10题</text>
				</view>
				<view class="count-button" :class="{'selected': selectedCount === 20}" @click="selectCount(20)">
					<text>20题</text>
				</view>
				<view class="count-button" :class="{'selected': selectedCount === 50}" @click="selectCount(50)">
					<text>50题</text>
				</view>
			</view>
		</view>

		<!-- 开始学习按钮 -->
		<view class="start-button" :class="{'disabled': !canStart}" @click="startLearning">
			<text>开始学习</text>
		</view>
	</view>
</template>

<script>
	import {
		idiomList
	} from "@/config/api.js"; 

	export default {
		data() {
			return {
				title: '成语学习',
				selectedMode: '', 
				selectedCount: 0,
				statusBarHeight: 20,
				searchKeyword: '',
				searchResult: null,
				searchLoading: false  // 新增loading状态
			};
		},
		computed: {
			// 是否可以开始学习
			canStart() {
				return this.selectedMode && this.selectedCount > 0;
			}
		},
		onLoad() {
			// 获取系统信息，适配刘海屏
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight || 20;
				}
			});
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				});
			},

			// 选择学习模式
			selectMode(mode) {
				this.selectedMode = mode;
			},

			// 选择题目数量
			selectCount(count) {
				this.selectedCount = count;
			},

			// 开始学习
			startLearning() {
				if (!this.canStart) {
					uni.showToast({
						title: '请选择学习模式和题目数量',
						icon: 'none'
					});
					return;
				}

				// 根据选择的模式跳转到不同页面
				const url = this.selectedMode === 'study' ?
					`/pages/idiom/study?count=${this.selectedCount}` :
					`/pages/idiom/dictation?count=${this.selectedCount}`;

				uni.navigateTo({
					url: url,
					fail: (err) => {
						console.error('导航失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},

			// 修改搜索成语方法
			async searchIdiom() {
				const keyword = this.searchKeyword.trim();
				if (!keyword) {
					this.searchResult = null;
					return;
				}
				
				this.searchLoading = true;
				try {
					let params = `?idiom=${encodeURIComponent(keyword)}`;  // 修改这里，对中文进行编码
					const res = await idiomList(params);  // 调用接口
					if (res && res.rows) {
						this.searchResult = res.rows[0];  // 取第一个匹配结果
					} else {
						this.searchResult = {
							idiom: '暂未收录该成语',
							pinyin: '',
							explanation: '',
							example: ''
						};
					}
				} catch (error) {
					console.error('搜索成语失败:', error);
					uni.showToast({
						title: '搜索失败，请重试',
						icon: 'none'
					});
				} finally {
					this.searchLoading = false;
				}
			}
		}
	};
</script>

<style>
	/* 搜索区域样式 */
	.search-area {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		/* 调整上下间距 */
	}

	.search-area input {
		width: 70%;
		height: 60rpx;
		border: 1rpx solid #ccc;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
	}

	.search-area button {
		width: 20%;
		height: 60rpx;
		background-color: #4A89DC;
		border: none;
		border-radius: 30rpx;
		color: #fff;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	/* 搜索结果样式 */
	.search-result {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.result-item {
		display: flex;
		flex-direction: column;
		/* 修改为垂直排列 */
		align-items: center;
	}

	.result-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.result-pinyin {
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 10rpx;
	}

	.result-explanation {
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.result-example {
		font-size: 24rpx;
		color: #666666;
	}

	/* 全局容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 30rpx 50rpx;
	}

	/* 安全区域适配刘海屏 */
	.safe-area {
		width: 100%;
		height: var(--status-bar-height);
		background-color: #ffffff;
	}

	/* 页面标题栏样式 */
	.header {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 0 30rpx;
		margin: 0 -30rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.back-button {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.placeholder {
		width: 60rpx;
	}

	/* 分区标题 */
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
	}

	/* 模式选择区域 */
	.mode-selection {
		margin-bottom: 50rpx;
	}

	.mode-cards {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.mode-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s;
		border: 2rpx solid transparent;
	}

	.mode-card.selected {
		border-color: #4A89DC;
		background-color: rgba(74, 137, 220, 0.05);
	}

	.mode-icon {
		margin-bottom: 20rpx;
	}

	.mode-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.mode-desc {
		font-size: 24rpx;
		color: #666666;
		text-align: center;
	}

	/* 题目数量选择区域 */
	.count-selection {
		margin-bottom: 50rpx;
	}

	.count-buttons {
		display: flex;
		justify-content: space-between;
	}

	.count-button {
		width: 30%;
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s;
		border: 2rpx solid transparent;
	}

	.count-button.selected {
		border-color: #4A89DC;
		background-color: rgba(74, 137, 220, 0.05);
	}

	.count-button text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	/* 开始学习按钮 */
	.start-button {
		width: 100%;
		height: 90rpx;
		background-color: #4A89DC;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 10rpx rgba(74, 137, 220, 0.3);
		transition: all 0.3s;
	}

	.start-button.disabled {
		background-color: #cccccc;
		box-shadow: none;
	}

	.start-button text {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.question-bank-desc {
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		font-size: 14px;
		color: #666666;
		text-align: center;
	}
</style>